<template>
  <div class="com-container" :style="{ height: '672px' }">
    <div class="title">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link" :style="comStyle">
          {{ showTitle }}<i class="el-icon-arrow-down el-icon--right" :style="comStyle"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item class="el-dropdown-item" v-for="item in slectTypes" :key="item.key" :command="item.key" :style="comDown">{{ item.text }}</el-dropdown-item>
          <!-- <el-dropdown-item command="b">狮子头</el-dropdown-item> -->
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="com-chart" ref="trend_ref"></div>
  </div>
</template>
 
<script>
import * as echarts from "echarts";

export default {
  name: "Trend",
  data() {
    return {
      chartInstance: null,
      allData: {
        map: {
          title: "战队出场次数",
          base: 310,
          unit: "次",
          data: [
            {
              name: "南京hero久竞",
              data: [
                "3",
                "5",
                "2",
                "6",
                "2",
                "2",
                "3",
                "4",
                "2",
                "6",
                "5",
                "5",
              ],
            },
            {
              name: "TES",
              data: [
                "3",
                "3",
                "5",
                "6",
                "2",
                "5",
                "3",
                "6",
                "6",
                "6",
                "3",
                "1",
                
              ],
            },
            {
              name: "深圳",
              data: [
                 "3",
                "5",
                "2",
                "6",
                "2",
                "2",
                "3",
                "4",
                "2",
                "6",
                "5",
                "5",
              ],
            },
            {
              name: "深圳DYG",
              data: [
                 "4",
                "5",
                "3",
                "1",
                "2",
                "6",
                "7",
                "6",
                "2",
                "2",
                "3",
                "5",
              ],
            },
            {
              name: "RW侠",
              data: [
                 "3",
                "4",
                "4",
                "2",
                "6",
                "3",
                "1",
                "2",
                "6",
                "6",
                "5",
                "3",
              ],
            },
          ],
        },
        seller: {
          title: "商家销量趋势",
          base: 120,
          unit: "万",
          data: [
            {
              name: "商家1",
              data: [
                "33.00",
                "86.07",
                "28.77",
                "34.29",
                "102.45",
                "0.30",
                "50.50",
                "21.70",
                "25.41",
                "25.71",
                "66.90",
                "63.29",
              ],
            },
            {
              name: "商家2",
              data: [
                "12.83",
                "102.42",
                "37.37",
                "95.55",
                "45.45",
                "112.72",
                "113.53",
                "106.41",
                "75.67",
                "113.91",
                "37.32",
                "28.04",
              ],
            },
            {
              name: "商家3",
              data: [
                "73.54",
                "40.92",
                "89.81",
                "113.41",
                "76.34",
                "107.15",
                "55.61",
                "0.33",
                "106.29",
                "78.30",
                "98.05",
                "38.67",
              ],
            },
            {
              name: "商家4",
              data: [
                "47.19",
                "73.57",
                "44.60",
                "84.03",
                "62.82",
                "15.65",
                "64.72",
                "88.98",
                "29.25",
                "5.41",
                "79.11",
                "118.46",
              ],
            },
            {
              name: "商家5",
              data: [
                "74.84",
                "116.45",
                "107.69",
                "11.03",
                "17.31",
                "42.22",
                "97.60",
                "108.64",
                "43.87",
                "110.65",
                "5.96",
                "38.41",
              ],
            },
          ],
        },
        commodity: {
          title: "商品销量趋势",
          base: 50,
          unit: "万",
          data: [
            {
              name: "女装",
              data: [
                "47.71",
                "13.34",
                "19.30",
                "7.93",
                "41.93",
                "23.01",
                "22.63",
                "26.91",
                "0.62",
                "39.23",
                "48.74",
                "29.48",
              ],
            },
            {
              name: "手机数码",
              data: [
                "46.66",
                "46.52",
                "23.65",
                "1.73",
                "44.26",
                "47.07",
                "17.86",
                "40.20",
                "3.78",
                "31.46",
                "28.01",
                "8.63",
              ],
            },
            {
              name: "男装",
              data: [
                "26.98",
                "30.71",
                "42.59",
                "29.50",
                "26.86",
                "17.65",
                "30.15",
                "15.85",
                "9.28",
                "30.20",
                "32.35",
                "34.46",
              ],
            },
            {
              name: "大家电",
              data: [
                "20.26",
                "46.23",
                "43.84",
                "46.75",
                "28.29",
                "32.36",
                "45.30",
                "16.73",
                "40.40",
                "45.07",
                "29.86",
                "41.92",
              ],
            },
            {
              name: "美妆护肤",
              data: [
                "7.58",
                "23.66",
                "39.78",
                "30.20",
                "25.72",
                "36.20",
                "47.55",
                "35.39",
                "27.85",
                "37.56",
                "16.91",
                "3.91",
              ],
            },
          ],
        },
        common: {
          month: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        type: [
          {
            key: "map",
            text: "地区销量趋势",
          },
          {
            key: "seller",
            text: "商家销量趋势",
          },
          {
            key: "commodity",
            text: "商品销量趋势",
          },
        ],
      },
      choiceType: 'map',
      titleFontSize: 48
    };
  },
  mounted() {
    // 页面打开的时候需要运行的方法
    this.initChart();
    this.getData();
    // 分辨率的适配
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    // 取消所有的监听事件
    window.removeEventListener("resize", this.screenAdapter);
  },
  computed: {
    // 编写计算函数
    slectTypes() {
        if(!this.allData){
            return []
        }else{
            return this.allData.type
        }
    },
    showTitle() {
        if(!this.allData){
            return ""
        }else{
            return this.allData[this.choiceType].title
        }
    },
    comStyle() {
        return {
            fontSize: this.titleFontSize + 'px'
        }
    },
    comDown(){
        return {
              fontSize: this.titleFontSize + 'px',
              width: this.titleFontSize * 6 + 'px',
              height: this.titleFontSize * 1.2 + 'px'
        }
    }
  },
  methods: {
    // 初始化实例的方法
    initChart() {
      this.chartInstance = echarts.init(this.$refs.trend_ref);
      const initOption = {
        grid: {
          left: "7%",
          right: "5%",
          top: "36%",
          bottom: "20%",
          contianLabel: true,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          left: 40,
          top: "20%",
          icon: "circle",
        },
        xAxis: {
          type: "category",
          // 取消与坐标轴的间隙
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
          }
      
      };
      this.chartInstance.setOption(initOption);
    },
    getData() {
      // 通过axios获取后台数据,给allData赋值

      // 在调用 updateChart方法
      this.updateChart();
    },
    // 处理数据的函数
    updateChart() {
      // 半透明的颜色值
      const colorArr1 = [
        "rgba(11, 168, 44, 0.5)",
        "rgba(44, 110, 255, 0.5)",
        "rgba(22, 242, 217, 0.5)",
        "rgba(254, 33, 30, 0.5)",
        "rgba(250, 105, 0, 0.5)",
      ];
      // 全透明的颜色值
      const colorArr2 = [
        "rgba(11, 168, 44, 0)",
        "rgba(44, 110, 255, 0)",
        "rgba(22, 242, 217, 0)",
        "rgba(254, 33, 30, 0)",
        "rgba(250, 105, 0, 0)",
      ];
      // 分解allData，对每一个分数据项进行赋值
      const timeArr = this.allData.common.month;
      // 去除map里面的数值
      const valueArr = this.allData[this.choiceType].data;
      const seriesArr = valueArr.map((item, index) => {
        return {
          name: item.name,
          type: "line",
          data: item.data,
          smooth: true,
          stack: "map",
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: colorArr1[index],
              },
              {
                offset: 1,
                color: colorArr2[index],
              },
            ]),
          },
        };
      });
      const legendArr = valueArr.map((item) => {
        return item.name;
      });

      const dataOption = {
        xAxis: {
          data: timeArr,
        },
        legend: {
          data: legendArr,
        },
        series: seriesArr,
      };
      this.chartInstance.setOption(dataOption);
    },
    // 屏幕的适配
    screenAdapter() {
      // 监听屏幕宽度变化的事件， 获取屏幕的宽度
      // this.titleFontSize = (this.$refs.trend_ref.offsetWidth / 100) * 3.6
      this.titleFontSize = (this.$refs.trend_ref.style.width / 100) * 3.6
      // 根据屏幕的宽度对不同的数据进行更改
      console.log(this.titleFontSize)
      const adapterOption = {
          legend: {
              itemWidth: this.titleFontSize,
              itemHeight: this.titleFontSize,
              itemGap: this.titleFontSize,
              textStyle: {
                  fontSize: this.titleFontSize / 2
              }
          }
      };
      this.chartInstance.setOption(adapterOption);

      // 手动加载resize
      this.chartInstance.resize();
    },
    handleCommand(command) {
      this.$message("click on item " + command);
      this.choiceType = command
      this.updateChart()
    },
  },
};
</script>
 
<style scoped lang="less">
.title {
  position: absolute;
  left: 50px;
  top: 20px;
  z-index: 999;
  color: white;
  cursor: pointer;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  font-size: 48px;
}
.el-dropdown-item {
  font-size: 36px;
  background-color: rgba(102, 104, 103, 0);
//   box-color: 0 2px 10px 2px #92b6dd;
  width: 320px;
  height: 60px;
}
.el-icon-arrow-down {
  font-size: 48px;
}
</style>